<template>
    <div>
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="$router.back()" />
        <van-skeleton title :row="15" v-show="loading" />
        <div v-show="!loading">
            <div class="address-action-div">
                <div class="address-f">
                    <div><van-icon name="location-o" /></div>
                    <div class="address-user">
                        <div class="address-userInfo">
                            <span>{{ orderInfo.name }}</span>
                            <span style="margin-left: 10px;">{{ orderInfo.tel }}</span>
                        </div>
                        <div class="address-info">
                            <span>{{ orderInfo.address }}</span>
                        </div>
                    </div>
                </div>
                <van-icon name="edit" />
            </div>
            <van-card num="1" :price="orderInfo.totalFee" :desc="orderInfo.serviceContent" :title="orderInfo.serviceName"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            <div class="my-displayline">
                <DisplayLine f="上门服务费" :s="'￥' + orderInfo.homeServiceFee"></DisplayLine>
                <DisplayLine f="操作费" :s="'￥' + orderInfo.operatingFee"></DisplayLine>
                <DisplayLine f="总费用" :s="'￥' + orderInfo.totalFee"></DisplayLine>
                <van-divider />
                <DisplayLine f="订单编号" :s="orderInfo.id"></DisplayLine>
                <DisplayLine f="创建时间" :s="orderInfo.createTime"></DisplayLine>
                <DisplayLine f="备注" :s="orderInfo.note"></DisplayLine>
            </div>
            <van-submit-bar :price="parseInt(orderInfo.totalFee) * 100" button-text="立即支付" @submit="onSubmit" />
        </div>
    </div>
</template>

<script>
import DisplayLine from "@/components/DisplayLine";
export default {
    name: "PaymentOrder",
    components: {
        DisplayLine
    },
    data() {
        return {
            // 是否加载
            loading: true,
            orderInfo: {}
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.loading = true
            let res = await this.$store.dispatch("getOrderInfo", {
                orderId: this.$route.params.id
            })
            this.loading = false
            if (res.success) this.orderInfo = res.data
            else this.$myFun.resError(res.message)
        },
        // 支付
        async onSubmit() {
            let res = await this.$store.dispatch("payOrder", this.orderInfo.id)
            // if (res.success){
            //     this.$toast.success(res.message)
            //     setTimeout(() => {
            //         this.$router.push("/user/order?tag=2")
            //     }, 500)
            // }
            // else this.$myFun.resError(res.message)
            const div = document.createElement('divform')
            div.innerHTML = res.data
            document.body.appendChild(div)
            document.forms[0].setAttribute('target', '_blank')
            document.forms[0].submit()
        },
    },
}
</script>

<style scoped>
.my-displayline {
    padding: 8px 16px;
}

.displayLine-div {
    height: 35px;
    font-size: 0.8rem;
}

.address-action-div {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-f {
    display: flex;
    align-items: center;
}

.address-user {
    margin-left: 12px;
}

.address-userInfo {
    font-size: 1rem;
}

.address-info {
    font-size: 0.8rem;
    color: #323233;
}
</style>